<template>
  <div class="p-4 menu">
    <el-button type="primary" @click="openMenuEditDrawer('add')">新增</el-button>
    <div class="h-48 table-page">
      <el-table
        :data="menuTreeList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="菜单名称" align="center" show-overflow-tooltip />
        <el-table-column prop="icon" label="图标" align="center" show-overflow-tooltip />
        <el-table-column prop="name" label="name" align="center" show-overflow-tooltip />
        <el-table-column prop="path" label="path" align="center" show-overflow-tooltip />
        <el-table-column prop="file_path" label="菜单地址" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" show-overflow-tooltip width="140">
          <template #default="{ row }">
            <el-button type="primary" :icon="Edit" @click="openMenuEditDrawer('edit', row)" />
            <el-button type="danger" :icon="Delete" @click="deleteMenu(row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <MenuEditDrawer ref="menuEditRef" :menu-tree="menuTreeList" @refresh="getMenuTreeList" />
</template>
<script lang="ts" setup name="MenuSettingPage">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import { withLoading } from '@/utils'
import { menuTreeListApi, menuDeleteApi } from '@/api/menu'
import MenuEditDrawer from './components/EditDrawer.vue'

onMounted(() => {
  getMenuTreeList()
})
const menuTreeList = ref([]) // 菜单数据
const getMenuTreeList = async () => {
  try {
    const { code, data } = await withLoading(menuTreeListApi, {}, '.table-page')
    if (code === 0) {
      menuTreeList.value = data ?? []
    }
  } catch (error) {
    console.log(error)
  }
}

const menuEditRef = ref<ElRef>()
const openMenuEditDrawer = (type, row = {}) => {
  menuEditRef.value?.openDrawer(type, row)
}

const deleteMenu = async id => {
  try {
    const { code } = await menuDeleteApi(id)
    if (code === 0) {
      ElMessage.success('删除成功')
      getMenuTreeList()
    }
  } catch (error) {
    console.log(error)
  }
}
</script>
<style lang="scss" scoped></style>
